import React, { useState, useEffect } from 'react'
import { View, Image, Button } from '@tarojs/components'
import { AtCard, AtFloatLayout, AtTextarea } from 'taro-ui'
import { getCurrentInstance } from '@tarojs/taro'
import { request, baseURL } from '../../utils/request'
import { useRequest, useSetState } from 'ahooks'
import styles from './index.module.less'
import Icon from '../../components/icon'
const getDetail = (id) => {
  return request('get', `/app/postbar/${id}`, {})
}
const addCommentFunc = (id, answerOpenId, answerContent) => {
  return request('post', `/app/postbar/comment`, { id, answerOpenId, answerContent })
}
const initComment = { id: -1, answerOpenId: '', answerContent: '', username: '' }
const BarkDetail: React.FC<{}> = () => {
  // @ts-ignore
  const { id } = getCurrentInstance().router.params
  const [comment, setComment] = useSetState(initComment)

  const [detail, setDetail] = useState({})
  const [isOpened, setIsOpened] = useState(false)
  const detailFun = useRequest(getDetail, {
    manual: true,
    onSuccess: data => {
      // @ts-ignore
      setDetail(data)
    }
  })
  useEffect(() => {
    detailFun.run(id)
  }, [])
  const openComment = (username: string, answerOpenId: string) => {
    if (answerOpenId == '') {
      // @ts-ignore
      answerOpenId = detail.info.openId
    }
    setComment({ id: Number(id), username, answerOpenId })
    setIsOpened(true)
  }
  const addComment = useRequest(addCommentFunc, {
    manual: true,
    onSuccess: () => {
      setComment(initComment)
      detailFun.refresh()
      setIsOpened(false)
    }
  })
  const commentFunc = () => {
    addComment.run(comment.id, comment.answerOpenId, comment.answerContent)
  }

  return (

    <View className={styles.detail}>
      <View className={styles.Image}>
        {/* @ts-ignore */}
        {detail.pictures?.map(item => <Image src={`${baseURL}${item}`}></Image>)}
      </View>
      {/* @ts-ignore */}
      <View className='at-article'>
        <View className='at-article__h2' onClick={() => openComment('', '')} >
          {/* @ts-ignore */}
          {detail.info?.content}
        </View>
        {
          // @ts-ignore
          detail.info && <View className='at-article__info'>
            {/* @ts-ignore */}
            {detail.info?.createTime}&nbsp;&nbsp;&nbsp;<Icon classTitle="icon iconfont icon-ai-eye" />&nbsp;&nbsp;{detail.info?.lookNum}&nbsp;&nbsp;&nbsp;<Icon classTitle="icon iconfont icon-tubiaozhizuo-1" />&nbsp;&nbsp;{detail.info?.commentNum}
          </View>
        }

      </View>
      <View className={styles.barkCard}>
        {
          // @ts-ignore
          detail.comments && detail.comments.map(item => <AtCard
            className={styles.card}
            title={item.answerUsername === '' ? `${item.username} 评论` : `${item.username} 回复 ${item.answerUsername}`}
          >
            <View className={styles.footer}>
              <View onClick={() => openComment(item.username, item.openId)} ><Icon classTitle="icon iconfont icon-tubiaozhizuo-1"></Icon> &nbsp;&nbsp;{item.answerContent}</View>
            </View>
          </AtCard>)
        }
      </View>
      <AtFloatLayout isOpened={isOpened} onClose={() => setIsOpened(false)} title={comment.username ? `回复 ${comment.username}` : '添加评论'}>
        <AtTextarea
          count={false}
          value={comment.answerContent}
          onChange={e => setComment({ answerContent: e })}
          maxLength={200}
          height={350}
          placeholder='你的问题是...'
        />
        <Button onClick={commentFunc} style={{ marginTop: '10PX' }} type="primary" size="default">评 论</Button>
      </AtFloatLayout>
    </View>
  )
}

export default BarkDetail